<style lang="scss" scoped>

  $width:940px;

  $font-color:#777;

  .add-dialog{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    display: block;
    background: rgba(0,0,0,0.3);
    -webkit-user-drag: none;
    user-select: none;
  }

  .add-inner{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    display: block;
    background: white;
    width:$width;
    height: 800px;
    box-shadow: 0 0 10px rgba(0,0,0,1);
    border-radius: 5px;
    padding: 20px;
  }

  .wrapper{
    float: left;
    height: 760px;
    width:100%;
    display: block;
    overflow-y: scroll;
  }



  .add-header{
    width:100%;
    height: 50px;
    border-bottom: 2px solid $font-color;

    .header-title{
      margin:0px;
      padding: 0px;
      color: $font-color;
      font-family: '微软雅黑';
    }

  }



  .input-info-group{
    width:100%;
    height: auto;
    clear: both;
    float: left;
    padding-top: 30px;
  }

  .base-info-header{
    color: #ccc;
    font-size: 20px;
    font-family: '微软雅黑';
    display: block;
    float: left;
    width:100%;
    height: 30px;
    line-height: 30px;
  }

  .tips-text{
    width:100%;
    height: 30px;
    line-height: 30px;
    color: $font-color;
    font-size: 16px;
    font-family: '微软雅黑';
  }


</style>

<template>
  <div class="add-dialog" @click="closeLayer">
      <div class="add-inner">
        <div class="wrapper">
          <div class="add-header">
            <h2 class="header-title">新建项目</h2>
          </div>

          <div class="input-info-group">
            <span class="base-info-header">基本信息</span>
            <input-box label="项目编号" :label-width="80" v-model="project.project_num" placeholder="请输入项目编号"></input-box>
            <input-box label="项目名称" :label-width="80" v-model="project.project_name" placeholder="请输入项目名称"></input-box>
            <input-box label="标段名称" :label-width="80" v-model="project.sction_name" placeholder="请输入标段名称"></input-box>
            <input-box label="总体投资" :label-width="80" v-model="project.invest" placeholder="请输入总体投资">
              <span slot="other">元</span>
            </input-box>
            <select-box :options="template.projectCategory"   label="项目类型" :label-width="80" v-model="project.project_type" placeholder="请选择项目类型"></select-box>
            <input-box label="项目时间" type="date" :label-width="80" v-model="project.project_time" placeholder="请选择时间"></input-box>
            <select-box :options="template.investCategory"  label="投资模式" :label-width="80" v-model="project.investment_patterns" placeholder="请选择投资模式"></select-box>
            <input-box label="资金来源" :label-width="80" v-model="project.money_source" placeholder="请选择资金来源"></input-box>
            <select-box :options="template.plans"  label="符合城市规划" :label-width="100" v-model="project.iscity_plan"></select-box>
            <select-box  :options="template.plans" label="符合土地利用规划" :label-width="140" v-model="project.island_plan"></select-box>
          </div>

          <div class="input-info-group">
            <span class="base-info-header">施工信息</span>
            <input-box label="建设单位" :size="2" :label-width="80" v-model="project.construction_organeation" placeholder="请输入建设单位">
              <span class="icon-search" slot="other"></span>
            </input-box>
            <input-box label="施工负责人" :label-width="80" v-model="project.project_manager" placeholder="请填写施工负责人"></input-box>

            <input-box label="合同工期" :label-width="80" v-model="project.contract_time" placeholder="请填写合同工期"></input-box>
          </div>

          <div class="input-info-group">
            <span class="base-info-header">监理信息</span>
            <input-box label="监理单位" :label-width="80" :size="2" v-model="project.jianli_company" placeholder="请输入监理类型">
              <span class="icon-search" slot="other"></span>
            </input-box>
            <input-box label="监理负责人" :label-width="80" v-model="project.jianli_name" placeholder="请输入监理负责人"></input-box>
          </div>

          <div class="input-info-group">
            <span class="base-info-header">申报信息</span>
            <input-box label="申报类型" :label-width="80" v-model="project.apply_type" placeholder="请输入申报类型"></input-box>
            <input-box label="申报单位" :label-width="80" v-model="project.apply_complay" placeholder="请输入申报单位"></input-box>
            <input-box label="申报人" :label-width="80" v-model="project.apply_user" placeholder="请输入申报人"></input-box>
          </div>
          <div class="input-info-group">
            <upload @loadedFile="createFile" @onDelete="dropFile"></upload>
            <!--<upload :exsits="[{name:'文件1',url:'http://www.baidu.com.docx',fid:'1'}]"></upload>-->
            <span class="tips-text">[ 默认保存信息后以消息形式通知代理单位 ]</span>
          </div>
          <div class="input-info-group">
              <el-button @click="create">创建</el-button>
              <el-button @click="cancel">取消</el-button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>

  import InputBox from './InputBox/Index';

  import SelectBox from "./SelectBox/Index";

  import Upload from '../../../../components/Dialog/Load/index';

  import { Button } from "element-ui";

  import { mapState } from "vuex";

  import { INVEST_TYPE,PROJECT_TYPE,LAND_TYPE } from "@/conf/options";

  import  _ from "lodash";

  import  Config  from "@/conf/params.js";

  export default {
      name:"AddProject",
      components:{
        InputBox,
        Upload,
        SelectBox,
        'ElButton':Button
      },
      computed: mapState({
        loading: state => {
          return state.loading;
        },
        token: state => state.user.token
      }),
      data(){
        return {
          BASE_URL:Config.server,
          template:{
            projectCategory:PROJECT_TYPE,
            investCategory:INVEST_TYPE,
            plans:LAND_TYPE
          },
          project:{
            project_num:"",
            project_name:"",
            sction_name:"",
            invest:"",
            project_type:-1,
            investment_patterns:-1,
            /**
             * 是否符合规划
             */
            iscity_plan:-1,
            /**
             * 是否符合土地规划
             */
            island_plan:-1,
            project_time:"",
            construction_organeation:"",
            money_source:"",
            contract_time:"",
            project_manager:"",
            apply_type: "",
            apply_complay: "",
            apply_user: "",
            jianli_name:"",
            jianli_company:"",
            file:[]
          }
        }
      },
      methods:{
        createFile({data}){

          var name=data.filename;

          var url = this.BASE_URL+data.url;

          var fileId=data.id;

          this.project.file.push({
            id:fileId
          });

        },
        dropFile({id}){

          var index = _.findIndex(this.project.file,{id});

          this.project.file.splice(index,1);

        },
        create(){

          this.$confirm('即将创建项目，请仔细核对填写的信息是否正确，点击确认提交，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            this.$store.dispatch('createProject', {
              project:this.project,
              token:this.token
            }).then((response)=>{

             if(response.data=="ok"&&response.status==200&&response.statusText=="OK"){

               this.$message('新建项目成功!');
             }
             else {

               this.$message('新建项目失败!错误信息:'+res.data);
             }

             this.$router.go(-1);

            },(res)=>{

              this.$message('新建项目失败，失败原因：'+res.data);

            }).catch((err)=>{

              console.log(err);

              this.$message('系统错误,新建项目失败，失败原因：'+err);

            });


          },()=>{

            console.log('user cancel');

          }).catch((err) => {

            this.$message({
              type: 'warning',
              message: '错误，操作失败!'
            });

          });

        },
        cancel(){

          this.$confirm('确定要取消创建项目, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            this.$router.push({ name: "ProjectResponsibilityIndex"});

          },()=>{

            console.log('user cancel');

          }).catch(() => {

            this.$message({
              type: 'warning',
              message: '错误，操作失败!'
            });

          });

        },
        closeLayer($event){

          if ($event.target.className.indexOf("add-dialog")<0){
            return ;
          }

          this.$router.go(-1);
        }
      }
  }
</script>
